<template>
  <div class="page-all-content">
    <ListTitle list-title="空域使用批复处理"></ListTitle>
    <!-- GIS展示 -->
    <!-- <div id="cesiumContainer" class="page-with-background"></div> -->
    <div class="cesiumContainerBox">
      <div class="layer"></div>
      <div id="cesiumContainer" style="height: 80vh;width: 100%;"></div>
    </div>

    <div class="left-panel-container">
      <div class="img_left_title">
        <img src="../assets/img/module2/content.png" style="width: 100%" />
        <img src="../assets/img/module2/snailtitleicon.png"
          style="position: absolute; top: -10%; left: 6%; cursor: pointer; pointer-events: auto;"
          @click="toggleApprovalType" />
        <span class="text_left_title">空域批复文件</span>
      </div>

      <button v-if="!tableVisible" class="table-button-display" @click="tableVisible = true"></button>
      <button v-if="tableVisible" class="table-button-hidden" @click="tableVisible = false"></button>

      <!-- 功能输入按钮部分 -->
      <div v-if="tableVisible" class="table-actions">
        <!-- 搜索框 -->
        <input type="text" v-model="searchQuery" placeholder="请输入关键字" class="search-input" />
        <!-- 查询按钮 -->
        <button @click="filterTable" class="filter-button"></button>
        <!-- 排序选择 -->
        <select v-model="selectedSort" class="sort-select" @change="sortTable">
          <option value="application_acceptance_time" class="sort-select-item">
            按时间最新
          </option>
          <option value="id" class="sort-select-item">按序号排序</option>
        </select>

        <button @click="sortInverse" class="sort-button"></button>
      </div>

      <!-- 表格内容 -->
      <div v-if="tableVisible" class="table-context">
        <GoodTable :data="tableData" :columns="columns" @viewDetails="handleViewDetails"
          @viewDetailsHover="handleViewDetailsHover" @hoverLeave="hoverLeave" height="100%" ref="goodTable" />
      </div>
    </div>

    <!-- 弹窗内容 -->
    <div class="right-panel-container">
      <GoodDialog :visible.sync="statusDialogVisible" :selectedDetails="selectedDetails" ref="statusDialog"
        @entity-change="entityViewChange" @refreshTable="refreshTable">
      </GoodDialog>
    </div>
  </div>
</template>

<script>
import ListTitle from "@/components/ListTitle";
import axios from "axios";
import GoodTable from "@/components/GoodTable.vue";
import GoodDialog from "@/components/GoodDialog.vue";
import {
  drawCylinderAreaM1,
  draw3DRectangularPipelineTrackM1_2,
  draw3DPolygonalPrismM1,
} from "@/utils/draw3D-module2.js";

const baseApi = process.env.NODE_ENV === 'production'
  //? process.env.VUE_APP_REMOTE_API
  ? '/api'  // 使用代理路径
  : process.env.VUE_APP_REMOTE_API_MODULE2;

export default {
  name: "Module3UsageConditions",
  components: {
    GoodTable,
    GoodDialog,
    ListTitle,
  },
  data() {
    return {
      tableVisible: true, // 控制表格显示
      statusDialogVisible: false,
      selectedDetails: {}, // 存储选中的行数据
      selectedSort: "id", // 默认按序号排序
      searchQuery: "", // 搜索关键字
      inverseSort: true, // 排序顺序，默认升序
      fileList: [], // 上传文件列表
      rawData: [], // 保存从后端获取的所有数据
      tableData: [], // 当前显示的表格数据
      selectedApprovalType: 0, // 默认显示 approvalType 为 0 的数据
      gisdata: [],
      entityMap: {}, // 存储GIS实体对象
      viewer: null, // cesium 视图对象
      currentLabelEntity: null,
      currentColor: null,
      currentEntityType: null,
      columns: [
        { prop: "id", label: "#", width: "10%" },
        { prop: "approvalFileName", label: "批复文件", width: "45%" },
        { prop: "applicationAcceptanceTime", label: "接收时间", width: "45%" },
      ],
    };
  },
  created() {
    // 页面加载时获取数据
    this.fetchTableData();
  },
  mounted() {
    this.initializeCesium();
  },
  beforeDestroy() {
    this.cesiumDestroy();
  },
  methods: {
    async initializeCesium() {
      try {
        console.log("开始初始化Cesium");
        this.viewer = new Xmap.Viewer("cesiumContainer", {
          geocoder: false, //搜索工具
          homeButton: false, //平滑视角默认视角
          sceneModePicker: false, //2D/3D切换
          baseLayerPicker: false, //底图切换
          navigationHelpButton: false, //帮助按钮
          animation: false, //动画播放
          fullscreenButton: false, //全屏按钮
          timeline: false, //时间轴
        }).viewer;
        this.viewer.scene.frameState.creditDisplay.container.style.display = "none";

        // Xmap.AirspaceManage.HierarchicalGrid.createImageryProvider('xyz', { url: 'https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}' })
        // Xmap.AirspaceManage.HierarchicalGrid.createImageryProvider('xyz',
        //   {
        //     url: 'https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}'
        //   })
        this.viewer.imageryLayers.addImageryProvider(
          new Cesium.OpenStreetMapImageryProvider({
            // url: `http://192.168.0.135:8001/rsimageofhigh`,
            url: process.env.VUE_APP_MAP,
            fileExtension: 'png',
            maximumLevel: 19
          })
        )
        // // 加载3dtiles模型数据
        // Xmap.AirspaceManage.HierarchicalGrid.load3dtiles('http://192.168.0.135:9027/prod-api/static/3dtiles3/tileset.json')
        // 全国高程数据
        Xmap.AirspaceManage.HierarchicalGrid.loadDEM(process.env.VUE_APP_HEIGHT_MAP, true)
        console.log("initializeCesium");
        // console.log("viewer", viewer)
        // const container = document.getElementById('cesiumContainer-module2-ps');
        // const rect = container.getBoundingClientRect();

        // 后续变成后端汆传输的数据
        // 定义每个五边形的顶点位置，单位为经度、纬度（从Degrees定义）
        this.viewer.scene.screenSpaceCameraController.zoomEventTypes = [
          Cesium.CameraEventType.WHEEL
        ];
        // console.log("Cesium.CameraEventType",Cesium.CameraEventType )
        this.viewer.scene.screenSpaceCameraController.tiltEventTypes = [
          Cesium.CameraEventType.MIDDLE_DRAG // 鼠标中键按下事件
        ];
        this.viewer.camera.setView({
          destination: Cesium.Cartesian3.fromDegrees(113.5405629, 22.1247559, 17000),
        });
      } catch (error) {
        console.error("Cesium initialization failed:", error);
      }
    },
    async drawgis(row) {
      try {
        this.viewer.entities.removeAll();
        this.refreshGISdata(); // 刷新gis数据
        this.fetchGISData(row); // 获取gis数据

        const { circular, polygonal, straight } = this.gisdata;
        const entitiesToFlyTo = [];
        console.log("规划方案页面绘制GIS的数据", this.gisdata)

        // 绘制圆柱体
        if (circular.length > 0) {
          circular.forEach((coord, index) => {
            const entity = drawCylinderAreaM1(
              this.viewer,
              coord.longitude,
              coord.latitude,
              coord.minAltitude,
              coord.maxAltitude,
              coord.radius,
              coord.color,
              0.2,
              coord.text,
            );
            if (entity) {
              entity.properties = new Cesium.PropertyBag({
                index: coord.index,  // 自定义index字段
                activeIndex: coord.activeidentityid,  // 自定义activeIndex字段
                type: 'circular',
              });

              //暂时去掉
              // this.gisdata.circular[index].entity = entity; 
              this.addEntity(coord.activeidentityid, coord.index, entity);
              entitiesToFlyTo.push(entity);
            }
          });
        }

        // 绘制多边形柱体
        if (polygonal.length > 0) {
          polygonal.forEach((track, index) => {
            // 检查 coordinates 是否存在且长度大于0
            if (track.coordinates && Array.isArray(track.coordinates) && track.coordinates.length > 0) {
              // console.log("绘制多边形柱状体传入的数据", track)
              // console.log("经纬度坐标信息", track.coordinates.map(coord => [coord.longitude, coord.latitude]).flat())
              // console.log("最小高度", track.minAltitude)

              const entity = draw3DPolygonalPrismM1(
                this.viewer,
                track.coordinates.map(coord => [coord.longitude, coord.latitude]).flat(),
                track.minAltitude,
                track.maxAltitude,
                track.color,
                0.2,
                track.text
              );
              // console.log("entity", entity)
              // console.log("index", index)
              if (entity) {
                entity.properties = new Cesium.PropertyBag({
                  index: track.index,  // 自定义index字段
                  activeIndex: track.activeidentityid,  // 自定义activeIndex字段
                  type: 'polygonal', //多变形体设置为1，为了后续改颜色获取实体本体
                });
                entitiesToFlyTo.push(entity);
                this.addEntity(track.activeidentityid, track.index, entity);
              }
            } else {
              console.log(`Track ${index} 的 coordinates 数据为空或未定义`);
            }
          });
        }


        // 绘制长方体管道轨迹
        if (straight.length > 0) {
          console.log("绘制长方体管道传入的数据", straight);
          straight.forEach((track, index) => {
            // const coordinates = track.coordinates.map(coord => [coord.longitude, coord.latitude, coord.altitude]).flat();
            const coordinates = track.coordinates.map(coord => [coord.longitude, coord.latitude, track.maxAltitude]).flat();
            const pointNames = track.activeidentityid; // 获取每个轨迹点的名字

            // Ensure sizes array has the correct length
            // const sizes = new Array(coordinates.length / 3 - 1).fill([100, 50]); // 对应生成每段长宽
            const sizes = new Array(coordinates.length / 3 - 1).fill([100, track.maxAltitude - track.minAltitude]);

            // Check if sizes length matches coordinates length - 1
            if (sizes.length !== coordinates.length / 3 - 1) {
              console.error('Sizes array length does not match coordinates array length minus one');
            } else {
              const entities = draw3DRectangularPipelineTrackM1_2(
                this.viewer,
                coordinates,
                sizes,
                0.2,
                track.color,
                track.text,
                // pointNames // 传递轨迹点名字数组
              );
              if (entities) {
                // console.log("typeof entities",entities);
                entities.forEach((entity, num) => {
                  entity.properties = new Cesium.PropertyBag({
                    index: track.index,  // 自定义index字段
                    activeIndex: track.activeidentityid,  // 自定义activeIndex字段,
                    type: 'straight',
                  });

                  entitiesToFlyTo.push(entity);
                  console.log('添加实体', num)
                })
                //暂时去掉
                this.addEntity(track.activeidentityid, track.index, entities);
              }
            }
          });
        }

        // 调整实体视角
        if (entitiesToFlyTo.length > 0) {
          this.viewer.flyTo(entitiesToFlyTo, {
            duration: 2,
            offset: {
              heading: Cesium.Math.toRadians(0),
              pitch: Cesium.Math.toRadians(-30),  // 视角抬高一些

            }
          });
        }

        console.log("entityMap", this.entityMap)

        // 鼠标左键点击事件
        this.viewer.screenSpaceEventHandler.setInputAction((movement) => {
          // 清除之前的标签实体
          // if (currentLabelEntity) {
          //   this.viewer.entities.remove(currentLabelEntity);
          //   currentLabelEntity = null;
          // }
          const pickedObject = this.viewer.scene.pick(movement.position, 5);

          if (pickedObject && pickedObject.id && pickedObject.id.properties && pickedObject.id.properties.activeIndex) { // console.log("pickedObject", pickedObject)
            // console.log("pickedObject.id", pickedObject.id)
            // console.log("pickedObject.id.properties", pickedObject.id.properties)
            // console.log("pickedObject.id.properties.index", pickedObject.id.properties.index.getValue())
            // console.log("pickedObject.id.properties.activeIndex", pickedObject.id.properties.activeIndex.getValue())
            // console.log(this.$refs.statusDialog)
            // this.$refs.statusDialog.testClick()
            const id1 = pickedObject.id.properties.activeIndex.getValue()
            const id2 = pickedObject.id.properties.index.getValue()
            const type = pickedObject.id.properties.type.getValue()
            this.$refs.statusDialog.clickGis(id1, id2)
            this.viewer.flyTo(this.getEntity(id1, id2), {
              duration: 2,
              offset: {
                heading: Cesium.Math.toRadians(0),
                pitch: Cesium.Math.toRadians(-30),  // 视角抬高一些
                range: 16000
              }
            })

            this.entityChangeColor(this.getEntity(id1, id2), type)
            // console.log(this.getEntity(id1, id2).cylinder.material.color.getValue(Cesium.JulianDate.now()));
            // this.getEntity(id1, id2).cylinder.material.color=Cesium.Color['RED']
          }
        }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
        console.log('方案地图组件渲染成功');
      } catch (error) {
        console.error('方案地图组件渲染失败', error);
      }
    },
    entityChangeColor(entityAgent, type) {
      // 上一个点击的实体恢复颜色
      if (this.currentLabelEntity) {
        this.currentColor.alpha = 0.2;
        if (this.currentEntityType == "straight") {
          this.currentLabelEntity.forEach((entity) => {
            entity.material.color = this.currentColor;
          });
        } else {
          this.currentLabelEntity.material.color = this.currentColor;
        }
      }
      //更新当前实体的种类
      this.currentEntityType = type;
      // 对当前点击的实体进行颜色变化
      if (type === "circular") {
        this.currentLabelEntity = entityAgent.cylinder;
      } else if (type === "polygonal") {
        this.currentLabelEntity = entityAgent.polygon;
      } else if (type === "straight") {
        this.currentLabelEntity = entityAgent.map((entity) => entity.corridor);
      }

      if (this.currentEntityType == "straight") {
        this.currentColor = this.currentLabelEntity[0].material.color
          .getValue(Cesium.JulianDate.now())
          .clone();
        this.currentColor.alpha = 1;
        this.currentLabelEntity.forEach((entity) => {
          entity.material.color = this.currentColor;
        });
      } else {
        this.currentColor = this.currentLabelEntity.material.color
          .getValue(Cesium.JulianDate.now())
          .clone();
        this.currentColor.alpha = 1;
        this.currentLabelEntity.material.color = this.currentColor;
      }
      console.log("完成实体的变色");
    },
    // 销毁Cesium实例
    cesiumDestroy() {
      if (this.viewer) {
        this.viewer.destroy();
        this.viewer = null;
      }
      console.log(this.viewer);
    },
    async fetchGISData(row) {
      console.log('row.takeoffLandInfo', row.takeoffLandInfo)
      console.log('row.airlineInfo', row.airlineInfo)
      console.log('row.workInfo', row.workInfo)
      console.log('row.specialInfo', row.specialInfo)
      // 更新GIS数据，使gisdata的值符合作图的形式
      row.takeoffLandInfo && row.takeoffLandInfo.forEach((detail, index) => {
        console.log('正在处理起降机场数据:', detail)
        this.takeofflandpush(detail, index, 'main1')
      });

      // 遍历航路信息并根据 type 使用不同的颜色绘制
      row.airlineInfo && row.airlineInfo.forEach((detail, index) => {
        detail.shapes[0].shapes.forEach(shape => {
          let color = 'RED'; // 默认颜色为红色
          switch (detail.type) {
            case 0:
              color = 'CHOCOLATE';  // 低速航路
              break;
            case 1:
              color = 'ORANGE';  // 中速航路
              break;
            case 2:
              color = 'CORNFLOWERBLUE';  // 高速航路
              break;
            case 3:
              color = "DARKCYAN";  // 匝道
              break;
          }

          // 判断是航路还是航线
          if (this.selectedApprovalType === 1) { // 航线
            color = 'DEEPSKYBLUE'; // 航线的默认颜色为蓝色
          }

          this.straightpush(
            shape.points,              // 点数据
            shape.minAltitude,         // 底部高度
            shape.maxAltitude,         // 顶部高度
            index,                     // 索引
            'main2',                   // 信息 ID
            detail.name,               // 航路名称
            color                   // 颜色（示例）
          );
          console.log(`多边形柱体航路（类型 ${detail.type}）更新`);
        });
      });

      // 遍历作业区信息并根据 shapeType 调用相应的绘制方法
      row.workInfo && row.workInfo.forEach((detail, index) => {
        detail.shapes[0].shapes.forEach(shape => {
          if (shape.shapeType === 1) { // 圆柱体类型 1
            this.cirularpush(shape, index, 'main3', detail.name, 'CYAN');
            console.log('圆柱体更新');
          } else if (shape.shapeType === 2) { // 另一种圆柱体类型 2（目前使用相同绘制方法）
            this.cirularpush(shape, index, 'main3', detail.name, 'CYAN');
            console.log('圆柱体（类型 2）更新');
          } else if (shape.shapeType === 3) { // 多边形柱体
            this.polygonalpush(shape, index, 'main3', detail.name, 'CYAN');
            console.log('多边形柱体更新');
          }
        });
      });

      // 遍历特殊区域信息并根据 shapeType 调用相应的绘制方法
      row.specialInfo && row.specialInfo.forEach((detail, index) => {
        detail.shapes[0].shapes.forEach(shape => {
          if (shape.shapeType === 1) { // 圆形柱体
            this.cirularpush(shape, index, 'main4', detail.name, 'RED');
            console.log('圆形柱体更新');
          } else if (shape.shapeType === 2) { // 另一种圆形柱体类型
            this.cirularpush(shape, index, 'main4', detail.name, 'RED');
            console.log('圆形柱体（类型 2）更新');
          } else if (shape.shapeType === 3) { // 多边形柱体类型
            // 创建一个新的多边形数据对象
            const polygonalData = {
              points: [],  // 存放每个点的数据
              coordinates: [],  // 存放多边形顶点的经纬度
              minAltitude: shape.minAltitude,  // 从 shape 获取最小高度
              maxAltitude: shape.maxAltitude,  // 从 shape 获取最大高度
              index: index,
              activeidentityid: 'main4',
              text: detail.name,
              color: 'RED'
            };

            // 如果存在 points 数组，遍历并提取经纬度信息
            if (shape.points && Array.isArray(shape.points) && shape.points.length > 0) {
              shape.points.forEach(point => {
                // 确保每个点都包含有效的经纬度信息
                if (point.latitude && point.longitude) {
                  // 添加点到 points 数组
                  polygonalData.points.push({
                    altitude: point.altitude,  // 如果有高度信息，存储
                    latitude: point.latitude,
                    longitude: point.longitude,
                    sequence: point.sequence,  // 如果有顺序信息，存储
                    shapeId: point.shapeId  // 如果有形状 ID，存储
                  });
                } else {
                  console.log("发现无效的点数据:", point);
                }
              });
            } else {
              console.log("没有可用的点数据 (shape.points 为空或未定义)");
            }

            // 检查是否有有效的坐标
            if (polygonalData.points.length > 0) {
              // 调用 polygonalpush 函数来绘制多边形柱体
              this.polygonalpush(polygonalData, index, 'main4', detail.name, 'RED');
              console.log('多边形柱体更新:', polygonalData);
            } else {
              console.log("没有有效的坐标数据，跳过该多边形柱体");
            }
          }
        });
      });
    },
    // 获取表格数据
    async fetchTableData() {
      try {
        const response = await axios.post(`${baseApi}/airspaceApproval/searchandsort`, null, {
          params: {
            sortedField: this.selectedSort,
            keyword: this.searchQuery,
            sortedOrder: this.inverseSort,
          },
        });

        if (response.data.code === 0) {
          // this.tableData = response.data.data;
          // console.log("空域使用批复处理页面从后端获取的所有数据:tableData", this.tableData)
          this.rawData = response.data.data;
          console.log("空域使用批复处理页面从后端获取的所有数据: rawData", this.rawData);
          // 根据当前 selectedApprovalType 筛选数据
          this.updateTableData();
        }
        this.refreshGISdata();
      } catch (error) {
        console.error("获取表格数据失败", error);
      }
    },
    // 更新表格数据
    updateTableData() {
      this.tableData = this.rawData.filter(item => item.approvalType === this.selectedApprovalType);
    },
    // 切换 approvalType
    toggleApprovalType() {
      this.selectedApprovalType = this.selectedApprovalType === 0 ? 1 : 0; // 在 0 和 1 之间切换
      this.updateTableData(); // 根据新的类型更新表格数据
    },
    updateSelectedData(row) {
      // this.fetchTableData();
      this.selectedDetails = row;
      // this.statusDialogVisible = false;
      console.log("父组件更新成功");
    },
    sortTable() {
      // 重新获取排序后的数据
      this.fetchTableData();
    },
    sortInverse() {
      this.inverseSort = !this.inverseSort;
      // console.log(this.inverseSort);
      this.fetchTableData();
    },

    filterTable() {
      // 触发搜索过滤，重新获取数据
      this.fetchTableData();
    },
    refreshTable() {
      // 刷新表格数据，重置搜索和排序
      this.selectedSort = "id";
      this.searchQuery = "";
      console.log("触发父组件refresh函数")
      this.fetchTableData();
    },
    handleViewDetails(row) {
      this.selectedDetails = row; // 将点击的行数据保存
      this.statusDialogVisible = true; // 显示弹窗
      this.$refs.statusDialog.refreshChange();
      this.drawgis(row);
      console.log("传给右弹窗的数据", this.selectedDetails)
    },
    handleViewDetailsHover(row) {
      this.selectedDetails = row; // 将点击的行数据保存
      this.statusDialogVisible = true; // 显示弹窗
    },
    hoverLeave() {
      this.statusDialogVisible = false;
    },
    // 添加实体函数
    addEntity(id1, id2, entity) {
      const key = `${id1}-${id2}`; // 组合 id1 和 id2 作为唯一键
      this.entityMap[key] = entity; // 存储实体
    },
    // 获取实体函数
    getEntity(id1, id2) {
      const key = `${id1}-${id2}`; // 组合 id1 和 id2 生成键
      return this.entityMap[key]; // 获取对应实体
    },
    entityViewChange(id1, id2, type) {
      // console.log(id1,id2);
      console.log(id1, id2);
      if (Cesium.defined(this.getEntity(id1, id2))) {
        this.viewer.flyTo(this.getEntity(id1, id2), {
          duration: 2,
          offset: {
            heading: Cesium.Math.toRadians(0),
            pitch: Cesium.Math.toRadians(-30), // 视角抬高一些
            range: 16000,
          },
        });
        this.entityChangeColor(this.getEntity(id1, id2), type);
      }
    },
    refreshGISdata() {
      this.gisdata = {
        circular: [],
        polygonal: [],
        straight: [],
      };
      // console.log("刷新GIS数据");
    },
    takeofflandpush(detail, index, infoid) {
      const shape = detail.shapes[0].shapes[0]; // 获取 shapes 中的第一个 shape 对象
      const centerPoint = shape.points[0]; // 圆心点坐标信息

      // 构建圆柱体的 GIS 数据
      this.gisdata.circular.push({
        longitude: centerPoint.longitude,
        latitude: centerPoint.latitude,
        minAltitude: shape.minAltitude,
        maxAltitude: shape.maxAltitude,
        radius: shape.rout, // 使用 rout 作为半径
        activeidentityid: infoid,
        index: index,
        color: 'YELLOW',
        text: detail.name + '区',
      });

      console.log("起降机场数据已添加至 GIS 数据:", this.gisdata.circular);
    },
    cirularpush(shape, index, infoid, text, color) {
      console.log("圆柱体 shape detail:", shape);

      // 圆柱体的中心点信息从 shape.points[0] 获取
      const centerPoint = shape.points[0];

      this.gisdata.circular.push({
        longitude: centerPoint.longitude,
        latitude: centerPoint.latitude,
        minAltitude: shape.minAltitude,
        maxAltitude: shape.maxAltitude,
        radius: shape.rout, // 使用 rout 作为半径
        activeidentityid: infoid,
        index: index,
        color: color,
        text: text,
      });

      console.log("圆柱体已添加至 GIS 数据:", this.gisdata.circular);
    },
    polygonalpush(shape, index, infoid, text, color) {
      console.log("多边形 detail:", shape);

      // 构建多边形数据
      const polygonalData = {
        coordinates: [],  // 存放多边形顶点的经纬度
        minAltitude: shape.minAltitude,  // 从 shape 获取最小高度
        maxAltitude: shape.maxAltitude,  // 从 shape 获取最大高度
        index: index,
        activeidentityid: infoid,
        text: text,
        color: color
      };

      // 检查 shape.points 是否存在且是一个数组
      if (shape.points && Array.isArray(shape.points) && shape.points.length > 0) {
        // 遍历 points 中的每个顶点并提取经纬度
        shape.points.forEach(point => {
          polygonalData.coordinates.push({
            longitude: point.longitude,
            latitude: point.latitude
          });
        });
      } else {
        console.log("没有可用的顶点数据 (shape.points 为空或未定义)");
      }


      // 添加到 GIS 数据结构的多边形列表中
      this.gisdata.polygonal.push(polygonalData);
      console.log("多边形柱体已添加至 GIS 数据:", this.gisdata.polygonal);
    },
    straightpush(points, minAltitude, maxAltitude, index, infoid, text, color) {
      console.log('点线形航路数据:', points);

      // 构建 straight 数据结构
      const straightData = {
        coordinates: [],           // 包含经纬度和高度的数组
        minAltitude: minAltitude,  // 底部高度
        maxAltitude: maxAltitude,  // 顶部高度
        index: index,
        activeidentityid: infoid,
        color: color,
        text: text
      };

      // 遍历 points，提取经纬度和高度信息
      points.forEach(point => {
        straightData.coordinates.push({
          longitude: point.longitude,
          latitude: point.latitude,
          altitude: point.altitude
        });
      });

      // 添加到 GIS 数据的 straight 部分
      this.gisdata.straight.push(straightData);
      console.log('straightData 已添加至 GIS 数据:', straightData);
    },
  },
  watch: {
    // 监听 statusDialogVisible 的变化
    statusDialogVisible(newValue, oldValue) {
      if (newValue === false && oldValue === true) {
        // 当 statusDialogVisible 从 1 变为 0 时，调用子组件的 resetSelection 方法
        this.$refs.goodTable.resetSelection();
        // console.log('resetSelection called');
      }
    },
  },
};
</script>


<style scoped>
h3 {
  color: #ffffff;
}

.page-all-content {
  /* background-color: blue; */
  height: 100%;
  width: 100%;
}


/* 顶部内容区样式 */
.header-content {
  /* position: relative; */
  width: 100%;
  /* 使其占据整个宽度 */
  height: 4%;
  background: url("../assets/img/module1/page1top.png") no-repeat;
  background-size: cover;
  display: flex;
  align-items: center;
  /* 垂直居中 */
  /* padding: 5px; */
  /* 增加内部间距 */
}

/* 标题样式 */
.header-title {
  background-image: linear-gradient(180deg,
      rgba(200, 215, 228, 1) 0,
      rgba(255, 255, 255, 1) 100%);
  position: relative;
  flex: 2;
  margin-left: 3%;
  /* width: 20%;
  height: 20%; */
  color: rgba(112, 112, 112, 1);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 1px;
  font-family: PangMenZhengDao-3;
  text-align: left;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 图标样式 */
.header-icon {
  position: relative;
  width: 22px;
  height: 20px;
  margin-left: 20px;
  /* 与其他内容间隔 */
  margin-top: -20px;
}

#cesiumContainer {
  /* position: relative; */
  margin-top: 0.5%;
  top: 0%;
  left: 0%;
  width: 100%;
  /* 让图片宽度覆盖整个容器 */
  height: 95.5%;
  /* 让图片高度覆盖整个容器 */
  z-index: 0;
  /* 将背景图片置于内容下层 */
  /* background-color: white; */
  background-size: 100% 100%;
}


.left-panel-container {
  position: absolute;
  /* 固定在左上角 */
  top: 12%;
  left: 16%;
  width: 40%;
  /* 面板的宽度 */
  height: 70%;
  /* 面板的高度，占据整个视口高度 */
  /* background-color: #333; */
  /* 面板的背景颜色 */
  color: white;
  /* 面板中的文字颜色 */
  padding: 20px;
  /* 内边距 */
  z-index: 5;
  /* 确保面板显示在其他元素上方 */
  pointer-events: none;
  /* background-color: #ffffff; */

}

.right-panel-container {
  position: absolute;
  /* 固定在左上角 */
  top: 9.5%;
  right: 1%;
  width: 22%;
  /* 面板的宽度 */
  height: 82%;
  /* 面板的高度，占据整个视口高度 */
  /* background-color: #333; */
  /* 面板的背景颜色 */
  color: white;
  /* 面板中的文字颜色 */
  padding: 20px;
  /* 内边距 */
  z-index: 5;
  /* 确保面板显示在其他元素上方 */
  pointer-events: none;
}

.img_left_title {
  position: absolute;
  left: 5%;
  top: 5%;
  background-size: 100% 100%;
  /* background-color: rgba(200, 215, 228, 1); */
}

.text_left_title {
  font-family: 'smallTitleFont', sans-serif;
  position: absolute;
  left: 19%;
  top: 5.9%;
  width: 60%;

  overflow-wrap: break-word;

  background-image: linear-gradient(180deg,
      rgba(200, 215, 228, 1) 0,
      rgba(255, 255, 255, 1) 100%);
  color: rgba(112, 112, 112, 1);
  font-size: 22px;
  letter-spacing: 1px;
  /* font-family: PangMenZhengDao-3; */
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
  line-height: 23px;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.table-button-display {
  background-image: url('../assets/img/module2/xianshi.png');
  position: absolute;
  background-size: 100% 100%;
  /* 背景图片覆盖按钮大小 */
  background-color: transparent;
  color: transparent;
  left: 49%;
  top: 5%;
  height: 30px;
  width: 30px;
  border: none;
  cursor: pointer;
  color: white;
  font-size: 16px;
  text-align: center;
  line-height: 8px;
  pointer-events: auto;
}

.table-button-hidden {
  background-image: url('../assets/img/module2/yincang.png');
  position: absolute;
  background-size: 100% 100%;
  /* 背景图片覆盖按钮大小 */
  background-color: transparent;
  color: transparent;
  left: 49%;
  top: 5%;
  height: 30px;
  width: 30px;
  border: none;
  cursor: pointer;
  color: white;
  font-size: 16px;
  text-align: center;
  line-height: 8px;
  pointer-events: auto;
}

.table-actions {
  position: absolute;
  /* background-color: #ffffff; */
  left: 5%;
  top: 9%;
  z-index: 1;
  width: 95%;
  height: 7%;
  pointer-events: auto;
}

.search-input {
  position: absolute;
  left: 0%;
  top: 6%;
  height: 60%;
  width: 20%;
  z-index: 1;
  border: none;
  background-image: url('../assets/img/module2/search.png');
  background-size: contain;
  /* 背景图片覆盖按钮大小 */
  background-color: transparent;
  background-size: 100% 100%;
  /* 背景图片覆盖按钮大小 */
  /* color: #ffffff; */
  padding-left: 10px;
  /* 添加内边距 */
  font-family: AlibabaPuHuiTi_2_55_Regular;
  font-weight: NaN;
  color: #ffffff;

}

.search-input::placeholder {
  font-family: AlibabaPuHuiTi_2_55_Regular;
  color: #ffffff;
  font-weight: NaN;
  font-size: 14px;
  padding-left: 6px;
  /* 添加内边距 */
}

.filter-button {
  background-image: url('../assets/img/module2/filtericon1.png');
  position: absolute;
  background-size: contain;
  /* 背景图片覆盖按钮大小 */
  background-repeat: no-repeat;
  background-color: transparent;
  color: transparent;
  left: 18%;
  top: 24%;
  width: 15px;
  height: 15px;
  z-index: 3;
  border: none;
  cursor: pointer;
  filter: brightness(0.1);
}

.filer-button:active {
  opacity: 0.8;
  /* 点击时使按钮变暗 */
}


.sort-select {
  position: absolute;
  left: 22%;
  top: 6%;
  width: 18%;
  height: 60%;
  z-index: 1;
  background-image: url('../assets/img/module2/search.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-color: transparent;
  border: none;
  /* 去除边框 */
  border-radius: 4px;
  /* 设置圆角 */
  color: #ffffff;
  /* 设置文字颜色 */
  padding-left: 10px;
  /* 设置左侧内边距 */
  font-size: 14px;
  font-family: AlibabaPuHuiTi_2_55_Regular;
  font-weight: NaN;
}

.sort-select-item {
  /* 不支持设置图片 */
  /* background-image:url('../assets/img/module2/table.png'); */
  background-color: black;
  background-size: 100% 100%;
  color: #ffffff;
  /* 设置文字颜色 */
}

.sort-button {
  background-image: url('../assets/img/module2/sorticon1.png');
  position: absolute;
  background-size: contain;
  /* 背景图片覆盖按钮大小 */
  background-repeat: no-repeat;
  background-color: transparent;
  color: transparent;
  left: 40%;
  top: 11%;
  width: 5%;
  height: 60%;
  z-index: 3;
  border: none;
  cursor: pointer;


}





.table-container2 {
  position: absolute;
  left: 50%;
  top: 6%;
  width: 30%;
  height: 80%;
  z-index: 1;
  display: block;
}

.table-context {
  position: absolute;
  /* background-color: rgb(0, 247, 255); */
  left: 5%;
  top: 13.5%;
  z-index: 1;
  width: 60%;
  height: 70%;

}

/* 旧元素 */

.page-with-background {
  /* background-image: url("../assets/img/test/bgp.png"); */
  background-size: cover;
  height: 83vh;
  margin-top: 5px;
}

.plan-diolog {
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 20px;
  height: 80%;
  /* 设置高度，使布局固定 */
}

.plan-diolog-left-pane {
  width: 45%;
  /* 左侧占 50% 宽度 */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.plan-diolog-left-up-pane {
  padding: 10px;
  border-radius: 5px;
  margin-bottom: 20px;
}

.plan-diolog-left-down-pane {
  padding: 10px;
  border-radius: 5px;
}

.plan-diolog-right-pane {
  width: 55%;
  /* 右侧占 35% 宽度 */
  display: flex;
  flex-direction: column;
  align-items: center;
}

h1 {
  color: #ffffff;
}

h2 {
  color: #ffffff;
}

h3 {
  color: #ffffff;
}

.cesiumContainerBox {
  width: 100%;
  position: relative;
  height: 80vh;
  margin: 0;
  padding: 0;

  .mapBg {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 3;
    pointer-events: none;
  }

  .layer {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 2;
    pointer-events: none;
    box-shadow: inset -200px 0px 60px -20px rgb(6 7 29 / 35%), inset 200px 0px 60px -20px rgb(6 7 29 / 35%);
  }

}
</style>